<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>无缝滚动</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            *{
                padding:0;
                margin:0;
            }
            .box{
                width:660px;
                margin: 100px auto;
            }
            .prev,.next{
                float: left;
                width:50px;
                line-height: 110px;
                margin:0 10px;
            }
            #sroll{
                float: left;
                width:520px;
                height:110px;
                background: #000;
                overflow:hidden;
                position:relative;
                overflow: hidden;
            }
            #sroll ul{
                position:absolute;
                left: 0;
                top:0;
            }
            #sroll li{
                width:100px;
                height:100px;
                line-height:100px;
                text-align: center;
                float:left;
                background: #999;
                list-style: none;
                margin:5px 2px;
            }            
            #sroll li a{
                color:#fff;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById("sroll");
                var oUl = oDiv.getElementsByTagName("ul")[0];
                var oLi = oUl.getElementsByTagName("li");
                var oLiMargin = "";
                if (oLi[0].currentStyle) {
                    oLiMargin = parseInt(oLi[0].currentStyle.marginLeft);
                }
                else {
                    oLiMargin = parseInt(getComputedStyle(oLi[0], false).marginLeft);
                }
                var oPrev = document.getElementById("prev");
                var oNext = document.getElementById("next");
                var speed = 2;
                oUl.innerHTML += oUl.innerHTML;
                oUl.style.width = (oLi[0].offsetWidth + oLiMargin * 2) * oLi.length + "px";
                function move() {
                    if (oUl.offsetLeft < -parseInt(oUl.style.width) / 2) {
                        oUl.style.left = "0";
                    }
                    if (oUl.offsetLeft > 0) {
                        oUl.style.left = (-parseInt(oUl.style.width) / 2) + "px";
                    }
                    oUl.style.left = (oUl.offsetLeft + speed) + "px";
                }
                var timer = setInterval(move, 30);
                oDiv.onmouseover = function() {
                    clearInterval(timer);
                };
                oDiv.onmouseout = function() {
                    timer = setInterval(move, 30);
                };
                oPrev.onclick = function() {
                    speed = -2;
                };
                oNext.onclick = function() {
                    speed = 2;
                };
            };
        </script>
    </head>
    <body>
        <div class="box">
            <span class="prev" id="prev">向左滚</span>
            <div id="sroll">
                <ul>
                    <li><a href="">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                </ul>
            </div>
            <span class="next" id="next">向右滚</span>
        </div>
    </body>
</html>
